<template>
    <section class="todoapp">
        <TodoHeaderVue :arr="list" @add="addFn"></TodoHeaderVue>
        <TodoMainVue :arr="list" @del="delFn"></TodoMainVue>
        <TodoFooterVue @changeType="changeTypeFn" :arr="list" @clearDone="clearDoneFn"></TodoFooterVue>
    </section>
</template>

<script>
import './styles/base.css'
import './styles/index.css'
import TodoHeaderVue from './components/TodoHeader.vue'
import TodoMainVue from './components/TodoMain.vue';
import TodoFooterVue from './components/TodoFooter.vue';
// 样式引入 + 导入组件并注册使用
export default {
    data() {
        return {
            type:'all',
				list:JSON.parse(localStorage.getItem('vuetodo'))||[]
        }
    },
watch:{
			list:{
				deep:true,
				handler(){
					localStorage.setItem('vuetodo',JSON.stringify(this.list))
				}
			}
		},
computed:{
	 showList(){
		if (this.type==='active') {
			return this.list.filter((item)=>item.isDone===false)
		}else if(this.type==='complete'){
			return this.list.filter((item)=>item.isDone)
		}else{
			return this.list
		}
	}
},
    methods:{
        //添加功能
        addFn(name){
            this.list.unshift({
                id:+new Date(),
                name,
                isDone:false
            })
        },
        //删除
        delFn(id){
            this.list=this.list.filter(item=>item.id!=id)
        },
        clearDoneFn(){
            this.list=this.list.filter(item=>!item.isDone)
        },
        changeTypeFn(type){
            this.type=type
        }
    },
    components:{
        TodoHeaderVue,
        TodoMainVue,
        TodoFooterVue
    }
}
</script>
